<template>
  <div id="particulars" class="particulars">
    <TopSubfield></TopSubfield>
    <centerSearch></centerSearch>
    <div class="youWantGoods">
      <div class="function-nag">
        <div class="function-center">
          <ul>
            <li
              v-for="item in navs"
              :key="item.id"
              @click="handNav(item.id)"
              :class="navInd==item.id?'actLi':''"
            >{{item.text}}</li>
          </ul>
        </div>
      </div>
    </div>
    <detailsContent :navInd="navInd"></detailsContent>
    <bottomSynopsis></bottomSynopsis>
  </div>
</template>

<script>
import TopSubfield from "@/components/top/TopSubfield"; //公共头部
import centerSearch from "@/components/top/centerSearch"; //公共搜索搜索框
import detailsContent from "@/components/CommonComponents/shopdetails/detailsContent"; //我是详情顶部公共detailsContent
import bottomSynopsis from "@/components/bottom/bottomSynopsis"; //我是详情顶部公共detailsContent
export default {
  name: "particulars",
  data() {
    return {
      TopSubfield,
      navInd: 41,
      navs: [
        {
          id: 41,
          text: "砍价拼购"
        },
        {
          id: 44,
          text: "限量秒杀"
        },
        {
          id: 43,
          text: "享7拼购"
        },
        {
          id: 4,
          text: "特惠活动"
        }
      ]
    };
  },
  components: {
    TopSubfield,
    centerSearch,
    detailsContent,
    bottomSynopsis
  },
  methods: {
    handNav(ind) {
      this.navInd = ind;
    }
  },
  created() {
    if(this.$route.query.falg){
       this.navInd=this.$route.query.falg*1;
    }
  }
};
</script>

<style lang="less" scoped>
.particulars {
  width: 100%;
  .youWantGoods {
    width: 100%;
    .function-nag {
      width: 100%;
      background-color: #ec882d;
      display: flex;
      justify-content: center;
      .function-center {
        width: 1340px;
        height: 41px;
        color: #fff;
        display: flex;
        flex-direction: row;
        ul {
          height: 40px;

          text-align: center;
          li {
            color: #fff;
            cursor: pointer;
            width: 100px;
            line-height: 40px;
            float: left;
            text-align: center;
          }
          .actLi {
            background: brown;
          }
          li:hover {
            background-color: #ec692d;
          }
        }
      }
    }
  }
}
</style>


